<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" append-to-body>
        <generate-form
            v-if="formConf.fields.length"
            :key="formParseKey"
            ref="generateForm"
            :form-conf="formConf"
            :page-form-model="formModel"
        />
        <el-button @click="dialogFormVisible=false">
            取 消
        </el-button>
        <el-button type="primary" @click="handleUpdate">
            确 定
        </el-button>
    </el-dialog>
</template>

<script>
export default {
    name: 'AddOrUpdate',
    components: {},
    props: {
        fields: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            formParseKey: new Date().getTime(),
            dialogFormVisible: false,
            formModel: {},
            title: '新增',
            formConf: {
                fields: [],
                formKey: '',
                disabled: false,
                span: 24,
                size: 'small',
                labelPosition: 'top',
                labelWidth: 100,
                formRules: 'rules',
                gutter: 15,
                formBtns: false,
                resetBtn: false,
                theme: {
                    backgroundImg: '',
                    showTitle: true,
                    showDescribe: true,
                    showNumber: false,
                    btnsColor: null
                }
            }
        }
    },
    watch: {
        fields: {
            handler: function(val, oldVal) {
                this.formConf.fields = val
            },
            immediate: true
        }
    },
    beforeCreate() {
        this.$options.components.GenerateForm = require('../../GenerateForm/GenerateForm').default
    },
    methods: {
        handleUpdate() {
            this.msgSuccess('保存成功')
            this.dialogFormVisible = false
            this.$emit('submit', this.$refs.generateForm.formModel)
        },
        showDialog(data) {
            if (data) {
                this.formModel = data
                this.title = '修改'
            } else {
                this.formModel = {}
                this.title = '新增'
            }
            this.dialogFormVisible = true
            this.formParseKey += new Date().getTime()
        }
    }
}
</script>

<style scoped>

</style>
